<template>
  <div class="shelveList-root mc-table">
    <lark-card border :radius="false" :show-title="false" body-width="75vw" body-height="30vh">
      <div class="shelveList-body">
        <div class="shelveList-body-header">
          <div class="shelveList-body-header-operation">
            <el-button v-if="vType != '6'" size="mini" type="success" @click="addBtn">新增</el-button>
            <div class="shelveList-body-header-close" @click="closeAction">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </div>
        <div class="shelveList-body-list">
          <div class="shelveList-body-table" id="shelveList-body-table">
            <shelves-table v-if="vType != '6'" v-loading="tableLoading" :table-data="tableData"></shelves-table>
            <seed-table @queryRegion="queryRegion" @expertDetail="expertDetail" @outStorageAction="outStorageAction" v-if="vType == '6'"
                        v-loading="tableLoading"
                        :table-data="tableData"></seed-table>

          </div>
          <div class="shelveList-body-pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="pageInfo.total"
              :current-page="pageInfo.pageNum"
              :page-size="pageInfo.pageSize"
              @current-change="pageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { statistical, storageList, outStorage } from '@/api/industry/gpm'
  import shelvesTable from '@/views/industry/gpm/shelveList/shelvesTable'
  import seedTable from '@/views/industry/gpm/shelveList/seedTable'
  import { Message } from 'element-ui'

  export default {
    name: 'shelveList',
    components: {
      seedTable,
      shelvesTable
    },
    props: {
      viewType: {
        type: String,
        default: null
      },
      parentId: {
        type: Number,
        default: null
      }
    },
    setup(props, content) {
      let data = reactive({
        tableLoading: false,
        tableData: [],
        vType: props.viewType,
        pageInfo: {
          total: 0,
          pageNum: 1,
          pageSize: 5
        }
      })
      watch(() => props.viewType, (newVal) => {
        data.vType = newVal
      })
      watch(() => props.parentId, () => {
        loadListData()
      })

      const addBtn = () => {
        content.emit('addBtn', (response) => {
          loadListData()
        })
      }

      const pageChange = async(currentPage) => {
        data.pageInfo.pageNum = currentPage
        await loadListData()
      }

      //outStorage
      const outStorageAction = async({ params, scb, fcb }) => {
        try {
          data.tableLoading = true
          let response = await outStorage(params)
          Message.success('出库成功')
          loadListData()
          scb()
        } catch (e) {
          fcb()
        } finally {
          data.tableLoading = false
        }
      }

      const editData = (row) => {
        content.emit('editBtn', {
          row, cb: () => {
            loadListData()
          }
        })
      }

      const searchAction = async(searchForm) => {
        try {
          data.tableLoading = true
          data.vType = '6'
          let response = await storageList({ status: 0, name: searchForm.value, ...data.pageInfo })

          data.tableData = response.rows
          data.pageInfo.total = response.total
        } finally {
          data.tableLoading = false
        }
      }

      const loadListData = async() => {
        try {
          if (props.parentId == null) {
            return
          }
          data.tableLoading = true
          let response = await statistical({ status: 0, parentId: props.parentId, ...data.pageInfo })

          data.tableData = response.rows
          data.pageInfo.total = response.total
        } finally {
          data.tableLoading = false
        }
      }

      onMounted(async() => {
        await loadListData()
      })

      const closeAction = () => {
        content.emit('closeSelfAction')
      }
      const expertDetail = (id) => {
        content.emit('expertDetail', id)
      }

      const queryRegion = (row) => {
        content.emit('queryRegion', row)
      }
      return {
        ...toRefs(data),
        queryRegion,
        outStorageAction,
        closeAction,
        pageChange,
        addBtn,
        editData,
        expertDetail,
        searchAction
      }
    }
  }
</script>

<style scoped lang="scss">
  $header-height: 20px;
  .shelveList-root {
    .shelveList-body {
      padding: 2px 2px 10px 10px;

      .shelveList-body-header {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        height: $header-height;
        box-sizing: border-box;

        .shelveList-body-header-tabs {
        }

        .shelveList-body-header-operation {
          display: flex;
        }

        .shelveList-body-header-close {
          margin-left: 20px;
          font-size: 20px;
          color: red;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .shelveList-body-list {
        .shelveList-body-table {
          height: calc(30vh - 50px);
        }

        .shelveList-body-pagination {

        }
      }

    }
  }
</style>
<style lang="scss">
  .shelveList-root {
    .shelveList-body {
      .shelveList-body-header {
        .shelveList-body-header-operation {
          .el-button.el-button--success.el-button--mini {
            padding-top: 5px;
            padding-bottom: 5px;
          }
        }
      }
    }
  }
</style>
